<template>
  <div v-if="isShow">
    <el-col
      v-for="(item,index) in productList"
      :key="index"
      style="margin-top: 5px"
      :span="6"
    >
      <el-card>
        <div class="item">
          <el-image :src="item.iconUrl" class="item-img" />
          <div class="item-title">
            {{ item.name }}
          </div>
        </div>
        <div class="uni-scroll" style="height: 240px;">
          <el-row :gutter="0">
            <el-col v-for="(item2,index2) in item.statusList" :key="index2" :span="12">
              <div style="display: flex;margin-top: 20px">
                <el-progress type="circle" :percentage="parseInt(( item2.num / item.all ) * 100)" :color="customColor" :width="55" />
                <div style="text-align: center;margin-left: 5px;width: 100px">
                  <div :class="[item2.status]">{{ $t(item2.status) }}</div>
                  <div :class="[item2.status,'count']" @click="clickStatus(item2.class)">{{ item2.num }}</div>
                </div>
              </div>
            </el-col>
            <el-col v-for="(item2,index2) in item.cityList" :key="index2" :span="12">
              <div style="display: flex;margin-top: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                <el-progress type="circle" :percentage="parseInt(( item2.num / item.all ) * 100)" :color="customColor" :width="55" />
                <div style="text-align: center;margin-top: 13px;margin-left: 5px;width: 100px">
                  <div class="OFFLINE">{{ item2.city }}</div>
                  <div class="OFFLINE count" @click="clickStatus(item2.class)">{{ item2.num }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import { getProductAndStatusCount, cityDeviceNum } from '@/api/iot/iotDeviceBelongApi'

export default {
  name: 'GetProductAndStatusCount',
  data() {
    return {
      productList: [],
      isShow: false
    }
  },
  created() {
    this.getProductAndStatusCount()
  },
  methods: {

    getProductAndStatusCount() {
      getProductAndStatusCount().then(res => {
        const { data, code } = res
        if (code === '200') {
          for (let i = 0, j = data.length; i < j; i++) {
            const item = data[i]
            item.all = 0
            item.cityList = []
            cityDeviceNum({
              productId: item.productId
            }).then(res => {
              const { data, code } = res
              if (code === '200') {
                let all = 0
                for (const item2 of data) {
                  all = all + item2.num
                }
                for (const item2 of data) {
                  item2.all = all
                  item.cityList.push(item2)
                }
              }
            })
            for (const item2 of item.statusList) {
              item.all = item.all + item2.num
            }
            data[i] = item
          }

          this.productList = data
          this.isShow = true
        }
      })
    }
  }
}
</script>

<style scoped>
  .count {
    font-size: 25px;
    text-align: center;
  }
  .item{
    background: #f9f9f9;
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    height: 35px;
    border-radius: 13px;
  }
  .item-img{
    margin: 5px;
    width: 25px;
    height: 25px;
  }
  .item-title {
    margin: 5px;
    font-size: 13px;
    line-height: 25px;
  }
</style>
